<template>
    <div class="pc-bg" :style="{ backgroundImage: `url(${bg})` }">
      <div class="pc-logo" :style="{ backgroundImage: `url(${logo})` }"></div>

      <div class="pc-form-wrap">
        <div class="pc-form" v-if="state.dataList && state.dataList.length > 0">
          <div class="pc-form-title">选择科目</div>

          <div style="display: flex; flex-wrap: wrap;">
            <EButton style="color: #fff; font-size: 40px; margin-right: 20px; margin-bottom: 20px;" v-for="(item, index) in state.dataList" :key="index" :text="item.name" @click="navTo(item.id)" :src="require('../../assets/images/btn.png')"></EButton>
            <!-- <div class="pc-btn" v-for="(item, index) in state.dataList" :key="index" @click="navTo(item.id)">
              {{ item.name }}
            </div> -->
          </div>
        </div>
      </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { toast } from '@/components/Toast/index'
import { getType } from '@/api'
import { useRouter } from 'vue-router'

const router = useRouter()
const bg = ref('')
const logo = ref('')
const state = reactive({
  dataList: [] as any[]
})
onMounted(() => {
  const systemInfo = window.localStorage.systemInfo
  if (systemInfo) {
    const systemInfoObj = JSON.parse(systemInfo)
    bg.value = systemInfoObj.bg_img
    logo.value = systemInfoObj.logo
  }
  initData()
})

const navTo = (id: string) => {
  router.push({
    path: '/exam-index',
    query: {
      classicId: id
    }
  })
}

const initData = async () => {
  try {
    const res: any = await getType({})
    console.log('question', res)
    const dataList = res.data
    if (dataList && dataList.length > 0) {
      state.dataList = dataList
    } else {
      toast('题库中暂时没有科目')
    }
  } catch (err) {
    toast('网络连接不可用，请稍后重试')
  }
}

</script>
<style lang="less" scoped>
  .pc-bg {
    width: 1920px;
    height: 1080px;
    background-color: #c8c7c7;
    position: relative;
    background-size: cover;
  }

  .pc-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 300px;
    height: 150px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 99;
  }

  .pc-form {
    width: 1200px;
    height: 600px;
    // background-color: #1b79f0;
    padding: 40px 90px;
    border-radius: 10px;
    box-sizing: border-box;
    position: relative;
  }
  .question-list {
    margin-top: 40px;
    width: 1200px;
    padding: 20px 0 0;
    background-color: #1b79f0;
    border-radius: 10px;
  }
  .pc-form-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .pc-form-foot {
    position: relative;
    display: flex;
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .pc-form-foot-item {
    flex: 1;
    text-align: center;
  }

  .pc-form-total {
    width: 120px;
    position: absolute;
    top: 20px;
    left: 20px;
    text-align: center;
    font-size: 24px;
    color: #FFF700;
    font-weight: bolder;
  }
  .pc-form-time {
    width: 150px;
    position: absolute;
    bottom: 15px;
    right: 0px;
    text-align: center;
    font-size: 24px;
    color: #FFF700;
    font-weight: bolder;
  }
  .pc-form-box {
    // padding: 60px 0 0px;
    text-align: center;
    color: #fff;
    max-width: 670px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    span {
      border: 1px solid white;
      width: 55px;
      display: inline-block;
      height: 55px;
      line-height: 55px;
      font-size: 30px;
      text-align: center;
      margin: 0 5px 20px;
      &.active {
        color: #1b79f0;
        background-color: rgba(242, 243, 245, .9);
      }
    }
  }
  .pc-form-title {
    color: white;
    font-size: 28px;
    position: relative;
    margin-bottom: 30px;
  }
  .pc-form-bottom {
    padding-top: 20px;
    color: #fff;
    font-size: 24px;
  }
  .pc-form-question {
    color: white;
    display: block;
    font-size: 28px;
    position: relative;
    user-select: none;
    height: 80px;
    display: flex;
    align-items: center;
  }
  .question-text {
    margin-left: 20px;
  }
  .color-red {
    color: #FF4444;
  }
  .color-green {
    color: #08f76d;
  }
  &.bg-green {
    color: #08f76d;
    border:1px solid rgba(222,255,238,1);
    background-color: rgba(222,255,238,1);
    &.border {
      border:1px solid #08f76d;
    }
  }
  &.bg-red {
    color: #FF4444;
    border:1px solid rgb(253, 226, 226);
    background-color: rgb(253, 226, 226);
    &.border {
      border:1px solid #FF4444;
    }
  }
  .pc-btn {
    width: 25%;
    background-color: #fff;
    height: 80px;
    line-height: 80px;
    font-size: 40px;
    text-align: center;
    margin-right: 20px;
    position: relative;
  }
  .pc-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 80px;
    background-color: #fff;
    top: 9px;
    left: 11px;
    z-index: -2;
  }
</style>
